<template>
    <view>
        <m-water-fall :datas="datas" :fall-count="fallCount">
            <template v-slot:header="{ data }">
                <slot name="header" :data="data"></slot>
            </template>
            <template v-slot:body="{ data }">
                <slot name="body" :data="data"></slot>
            </template>
            <template v-slot:footer="{ data }">
                <slot name="footer" :data="data"></slot>
            </template>
        </m-water-fall>
        <uni-load-more v-if="showload" :status="loadStatus"></uni-load-more>
    </view>
</template>

<script lang="ts" setup>
import { ref, watch, type Ref } from 'vue'
import MWaterFall from './MWaterFall.vue'
import { onReachBottom } from '@dcloudio/uni-app'
let param: PageQuery = {
    page: 1,
    pageSize: 10
}
const props = defineProps({
    fallCount: { type: Number, default: 2 },
    pageSize: { type: Number, default: 10 },
    listFn: { type: Function, required: true }
})
const datas = ref<Array<any>>([])
const loadStatus = ref<'more' | 'loading' | 'noMore'>('noMore')
const showload = ref(true)
const emit = defineEmits<{
    (e: 'querySucess', datas: any[]): void
}>()
onReachBottom(() => {
    showload.value = true
    loadStatus.value = 'loading'
    param.page++
    query()
})
function reset() {
    param.page = 1
    param.pageSize = 10
    showload.value = false
    query(true)
}
function query(reset: boolean = false) {
    props
        .listFn(param)
        .then((res: MResponse) => {
            emit('querySucess', res.data || [])
            if (reset) {
                datas.value = res.data || []
            } else {
                datas.value = datas.value.concat(res.data || [])
            }
            if (res.data && res.data.length > 0) {
                showload.value = false
            } else {
                showload.value = true
                loadStatus.value = 'noMore'
            }
        })
        .catch(() => {
            showload.value = true
            loadStatus.value = 'noMore'
        })
}
defineExpose({
    query,
    reset
})
</script>

<style lang="scss" scoped></style>
